<template>
  <div class="dashboard-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>鲜花总数</span>
            </div>
          </template>
          <div class="card-body">
            <div class="stat-value">{{ statistics.flowerCount }}</div>
            <div class="stat-icon">
              <el-icon><ShoppingBag /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>文创产品总数</span>
            </div>
          </template>
          <div class="card-body">
            <div class="stat-value">{{ statistics.productCount }}</div>
            <div class="stat-icon">
              <el-icon><Present /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>客户总数</span>
            </div>
          </template>
          <div class="card-body">
            <div class="stat-value">{{ statistics.customerCount }}</div>
            <div class="stat-icon">
              <el-icon><User /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card warning">
          <template #header>
            <div class="card-header">
              <span>库存预警</span>
            </div>
          </template>
          <div class="card-body">
            <div class="stat-value">{{ statistics.stockWarningCount }}</div>
            <div class="stat-icon">
              <el-icon><Warning /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近添加的商品 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>最近添加的商品</span>
            </div>
          </template>
          <el-table :data="statistics.recentFlowers" stripe>
            <el-table-column label="图片" width="70">
              <template #default="{ row }">
                <el-image
                  :src="row.imageUrl"
                  :preview-src-list="[row.imageUrl]"
                  fit="cover"
                  class="table-image"
                />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="category" label="分类" width="100" />
            <el-table-column prop="price" label="价格" width="100">
              <template #default="{ row }">
                ¥{{ row.price }}
              </template>
            </el-table-column>
            <el-table-column prop="stock" label="库存" width="80" align="center" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>库存预警商品</span>
            </div>
          </template>
          <el-table :data="statistics.lowStockFlowers" stripe>
            <el-table-column label="图片" width="70">
              <template #default="{ row }">
                <el-image
                  :src="row.imageUrl"
                  :preview-src-list="[row.imageUrl]"
                  fit="cover"
                  class="table-image"
                />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="category" label="分类" width="100" />
            <el-table-column prop="stock" label="库存" width="80" align="center">
              <template #default="{ row }">
                <el-tag :type="row.stock < 5 ? 'danger' : 'warning'">
                  {{ row.stock }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getStatistics } from '@/api/dashboard';
import { Present, ShoppingBag, User, Warning } from '@element-plus/icons-vue';
import { onMounted, ref } from 'vue';

const statistics = ref({
  flowerCount: 0,
  productCount: 0,
  customerCount: 0,
  stockWarningCount: 0,
  recentFlowers: [],
  lowStockFlowers: []
})

const fetchData = async () => {
  try {
    const { data } = await getStatistics()
    statistics.value = data
  } catch (error) {
    console.error('Failed to fetch dashboard data:', error)
  }
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.stat-card {
  height: 170px;
}

.stat-card.warning .stat-value,
.stat-card.warning .stat-icon {
  color: var(--el-color-danger);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  color: var(--el-color-primary);
}

.stat-icon {
  font-size: 48px;
  color: var(--el-color-primary);
  opacity: 0.8;
}

.table-image {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
</style> 